<template>
    <div>
        <Modal v-model="showDataModalFlag" title="修改资讯" @on-ok="editNewsClick('data2')" :mask-closable="false">
            <Form :label-width="100" ref="data2" :rules="ruleValidate2" :model="data2">
                <FormItem label="内容" prop="year">
                    <Input placeholder="内容" class="input-select-class" v-model="data2.title"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Row style="margin-top:20px">
            <Col span="19" class="table-form-input-select-col">
            <span class="alltitle"><router-link to="项目列表"> 项目列表</router-link>>预备员工专区>最新资讯</span>
            </Col>
        </Row>
        <Row class="fazhanlicheng" style="margin-top:20px;height:40px;padding-left:20px">
            <span class="title">最新资讯</span>
        </Row>
        <Row class="fazhanlicheng" style="heigh:60px;padding: 20px">
            <Col class="inner-info2" offset="1">内容</Col>
            <Col span="20">
                <Input class="time-picker" placeholder="输入内容" style="width: 100%" v-model="title" />
            </Col>
        </Row>

        <Row class="fazhanlicheng" style="heigh:60px;">
        </Row>
        <Row class="add-new-progress" style="heigh:60px;background:#f5f7f9">
            <Button type="primary" style="width:100px" @click="addNewsClick">确认提交</Button>
        </Row>
        <div class="content-div" style="margin-top:10px">
            <Table border stripe :columns="columns2" :data="data" ref="table"></Table>
        </div>
    </div>
</template>
<script>
import {
    formatDate
} from '@/js/date.js'
export default {
    data() {

            return {
                data2: {
                    title: ""
                },
                ruleValidate2: {
                    title: [{
                        required: true,
                        message: "请输入标题",
                        trigger: "change"
                    }],
                },
                data: [],
                columns2: [
                {
                    title: "序号",
                    width: 99,
                    render: (h, params) => {
                        return h("span", {}, params.index+1)
                    }
                }, 
                {
                    title: "内容",
                    key: "title",
                }, 
                {
                    title: "操作",
                    key: "action",
                    width: 150,

                    render: (h, params) => {
                        return h("div", [
                            // h(
                            //     "span", {
                            //         style: {
                            //             textDecoration: "underline",
                            //             color: "#4b80fd",
                            //             cursor: "pointer"
                            //         },
                            //         on: {
                            //             click: () => {
                            //                 this.moveUp(params.index);
                            //             }
                            //         }
                            //     },
                            //     "上移"
                            // ),
                            // h(
                            //     "span", {
                            //         style: {
                            //             textDecoration: "underline",
                            //             color: "#4b80fd",
                            //             cursor: "pointer",
                            //             'margin-left': "5px",
                            //         },
                            //         on: {
                            //             click: () => {
                            //                 this.moveDown(params.index);
                            //             }
                            //         }
                            //     },
                            //     "下移"
                            // ),
                            h(
                                "span", {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer",
                                        'margin-left': "5px",
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index);
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            h(
                                "span", {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer",
                                        'margin-left': "5px",
                                    },
                                    on: {
                                        click: () => {
                                            this.removeData(params.index);
                                        }
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }],
                showDataModalObject: {},
                
                showDataModalFlag: false,
                title: '',
                pic: '',
                url: ''
            }
        },

        methods: {
            moveUp(index) {
                if (index == 0) {
                    this.$Message.error('已经排在第一位！')
                    return
                }
                var id = this.data[index].id
                var self = this
                $.ajax({
                    url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=cmsedit&id="+id+"&sort=1",
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        if (data.code == 1) {
                            self.newslist();
                        }
                    }
                });
            },
            moveDown(index) {
                if (index == this.data.length - 1) {
                    this.$Message.error('已经排在最后一位！')
                    return
                }
                var id = this.data[index].id
                var self = this
                $.ajax({
                    url: " https://evp.51job.com/51job/api/51miniadmin/back.php?action=cmsedit&id="+id+"&sort=2",
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        if (data.code == 1) {
                            self.newslist();
                        }
                    }
                });
            },
            removeData(index) {
                var self = this
                self.$Modal.confirm({
                    title: '确认删除？',
                    content: '',
                    onOk: () => {

                        var self = this;

                        console.log(self.data[index].id)
                        $.ajax({
                            url: "https://evp.51job.com/51job/api/1.0/index.php/minirs/news/delNews?id=" + self.data[index].id,
                            dataType: "json",
                            type: "POST",
                            success: function(result) {
                                console.log(result);
                                if (result.code == 1) {
                                    self.$Message.info(result.msg);
                                    self.newslist()
                                }
                                else {
                                    self.$Message.error(result.msg);
                                }
                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });

            },
            edit(index) {
                this.showDataModalFlag = true;
                this.data2 = this.data[index];


                console.log(this.data[index])
            },
            addNewsClick(e) {
                if (this.title.length ==0) {
                    this.$Message.error('请输入标题');
                }
                var self = this;
                var poid = localStorage.pid;

                $.ajax({
                    url: "https://evp.51job.com/51job/api/1.0/index.php/minirs/news/addNews?project_id=" + poid + "&title=" + this.title,
                    dataType: "json",
                    type: "POST",
                    success: function(result) {
                        console.log(result);
                        if (result.code == 1) {
                            self.$Message.info('添加成功！');
                            self.title = ""
                            self.newslist()
                        }
                    }
                });
            },
            editNewsClick(name) {
                var poid = localStorage.pid;
                console.log(this.data2.id);
                this.$refs[name].validate(valid => {
                    if (valid) {
                        var self = this
                        $.ajax({
                            url: "https://evp.51job.com/51job/api/1.0/index.php/minirs/news/updateNews",
                            data: {
                                "project_id": poid,
                                "title": self.data2.title,
                                "id": self.data2.id,
                            },
                            type: "POST",
                            dataType: "json",
                            success: function(data) {
                                console.log(data);

                                if (data.code == 1) {
                                    console.log(data);
                                    self.$Message.success('修改成功!')
                                    self.newslist(1);
                                }
                            }
                        });

                    } else {
                        this.$Message.error("编辑失败！");
                    }
                });
            },

            newslist() {
                var self = this;
                var poid = localStorage.pid;

                $.ajax({
                    url: "https://evp.51job.com/51job/api/1.0/index.php/minirs/news/index?project_id=" + poid,
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        self.data = data.data;
                    }
                });
            },


        },
        created() {
            var self = this;
            var poid = localStorage.pid;
            self.newslist();
        }
}
</script>
<style scoped>
.innertitle {
    line-height: 30px;
    font-size: 14px;
    text-decoration: underline;
    color: #4B80FD;
    font-family: MicrosoftYaHei;
    cursor: pointer;
}

.fazhanlicheng {
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 1px;
    padding: 0px;
}

.title {
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 40px;
    font-weight: bold;
}

.inner-info2 {
    float: left;
    line-height: 60px;
    font-size: 14px;
    color: #333;
    font-family: MicrosoftYaHei;
    margin-right: 10px;
}

.time-picker {
    margin-top: 15px;
}

.add-new-progress {
    box-sizing: border-box;
    background: #fff;
    padding: 0;
    text-align: center;
    color: #4B80FD;
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    line-height: 60px;
    cursor: pointer;
}

.img-border {
    border: 1px dashed #d9d9d9;
    background: #e5e5e5;
    display: block;
    width: 60px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 50px;
    cursor: pointer;
}

.banner {
    width: 60px;
    text-align: center;
    height: 60px;
}

.avatar-uploader-icon-banner {
    font-size: 28px;
    color: #8c939d;
    width: 167px;
    height: 84px;
    line-height: 84px;
    text-align: center;
    float: left;
    position: relative;
}
</style>
